<template>
  <div class="home-wrapper">
    <header>
      <div class="header-box">
        <img src="@/assets/1.jpg" alt="" /> 后台管理系统
      </div>

      <el-button type="info" @click="loginOut">退出</el-button>
    </header>
    <div class="home-item">
      <aside :class="iscollapse ? 'width1' : 'width2'">
        <div class="item" @click="iscollapse = !iscollapse">|||</div>
        <el-menu
          :collapse="iscollapse"
          router
          active-text-color="blue"
          unique-opened="true"
          default-active="2"
          background-color="#edeff5"
          text-color="black"
        >
          <el-sub-menu
            :index="item.id + ''"
            v-for="item in meaus"
            :key="item.id"
          >
            <template #title>
              <el-icon>
                <component :is="iconmodel[item.id]" />
              </el-icon>
              <span>{{ item.authName }}</span>
            </template>
            <el-menu-item
              :index="it.path"
              v-for="it in item.children"
              :key="it.id"
            >
              <el-icon>
                <component :is="iconmodel[120]" />
              </el-icon>
              {{ it.authName }}</el-menu-item
            >
          </el-sub-menu>
        </el-menu>
      </aside>
      <main>
        <!-- 面包屑 -->
        <!-- v-if="parent" -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ parent }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ child }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="card">
          <router-view></router-view>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import api from "@/http/api.js"; //引入 api接口
import { toRefs, reactive, onMounted, onUpdated } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex"; /** 引入vuex*/
export default {
  name: "homeLayout",
  setup() {
    let store = useStore();
    let route = useRoute();
    const state = reactive({
      iscollapse: false,
      /**
       * 图标
       */
      iconmodel: {
        125: "Cherry",
        103: "Chicken",
        101: "ColdDrink",
        102: "Grape",
        145: "HotWater",
        120: "Burger",
      },
      /**
       * 菜单数据
       */
      meaus: [],
      child: "",
      parent: "",
    });
    onUpdated(() => {
      findName();
    });
    onMounted(() => {
      getMenus();
      findName();
    });
    /**
     * 获取面包屑
     */
    let findName = () => {
      const path = route.path.replace("/", "");
      // console.log(path);
      for (const parent of state.meaus) {
        for (const child of parent.children) {
          if (child.path === path) {
            state.parent = parent.authName;
            state.child = child.authName;
            return;
          }
        }
      }
    };
    /**
     * 获取菜单
     */
    let getMenus = () => {
      api.getMenu().then((res) => {
        console.log(res);
        if (res.meta.status == 200) {
          state.meaus = res.data;
          // console.log(state.meaus, 11);
        }
      });
    };
    /**
     * 退出登录
     */
    let loginOut = () => {
      store.dispatch("cleantoken");
    };

    return { ...toRefs(state), route, loginOut, getMenus, findName };
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.home-wrapper {
  height: 100%;
  overflow: hidden;
  header {
    height: 60px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    color: black;
    font-size: 20px;
    flex-shrink: 0;
    .header-box {
      display: flex;
      align-items: center;
      img {
        height: 60px;
      }
    }
  }
  .home-item {
    height: 100%;
    display: flex;
    justify-content: space-between;

    aside {
      // width: 200px;
      background-color: #edeff5;
      overflow: auto;
      &.width2 {
        width: 200px;
        transition: 0.2s linear;
      }
      &.width1 {
        width: 60px;
        transition: 0.1s linear;
      }

      .el-menu {
        transform: 0.15s linear;
      }
      .item {
        height: 24px;
        background-color: #c8cbd4;
        font-size: 20px;
        line-height: 24px;
        color: #fff;
        text-align: center;
        cursor: pointer;
      }
    }
    main {
      max-height: 93%;
      flex: 1;
      background-color: #dcdee1;
      padding: 20px;
      overflow: auto;
      .card {
        margin-top: 15px;
        background: rgb(238, 236, 236);
        // height: 100%;
        padding: 20px;
      }
    }
  }
}
</style>